<template>
  <!-- “质量工匠之星”活动开展情况 -->
  <a-spin :spinning="loading">
    <title-name :title="`${$route.query.month}月“质量工匠之星”活动开展情况`"></title-name>
    <!-- 处罚列表 -->
    <Empty v-if="!Object.keys(list) || !Object.keys(list).length" description="暂无数据" />
    <div v-for="(item, index) in list" :key="index">
      <div class="branchName">{{ index }}</div>
      <div>
        <a-table rowKey="id" bordered :pagination="false" :columns="columns" :dataSource="item"> </a-table>
      </div>
    </div>
    <!-- 编辑审批及费用认定 -->
    <DialogForm ref="dialogForm" :visible.sync="visible" edit-model="E" headerTitle="编辑审批及费用认定" :width="1000" :form="form" :formList="formList" :rules="rules" @confirm="submitForm" />
  </a-spin>
</template>

<script>
import { getStar, updateStar } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示
import DialogForm from '@/components/DialogForm' // 表单弹窗

export default {
  name: 'CraftsmanStar',
  components: {
    Empty,
    DialogForm
  },
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      loading: false, // 加载控件
      form: {}, // 编辑表单
      visible: false, // 弹窗显隐控件
      rules: {
        approve: [{ required: true, whitespace: true, message: '请输入审批及费用认定', trigger: 'change' }]
      }, // 校验规则
      formList: [{ type: 'BaseInput', keyName: 'approve', label: '审批及费用认定', span: 16 }], // 弹窗表单配置项
      list: {} // 列表
    }
  },
  computed: {
    // 表头
    columns() {
      let columns = [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          align: 'center',
          customRender() {
            return arguments[1].type ? arguments[2] + 1 : ''
          }
        },
        {
          title: '项目名称',
          width: 200,
          dataIndex: 'projectName'
        },
        {
          title: '月份',
          dataIndex: 'month'
        },
        {
          title: '质量表彰卡数量及金额',
          dataIndex: 'cardAmount',
          customRender() {
            return arguments[1].cardAmount ? `${arguments[1].cardNum || 0}张/${arguments[1].cardAmount || 0}元` : '---'
          }
        },
        {
          title: '周“质量工匠之星”及得卡数',
          dataIndex: 'weekStarAmount',
          customRender() {
            return arguments[1].weekStarAmount ? `${arguments[1].weekStarNum || 0}人/${arguments[1].weekStarAmount || 0}元` : '---'
          }
        },
        {
          title: '月“质量工匠之星”及得卡数',
          dataIndex: 'monthStarAmount',
          customRender() {
            return arguments[1].monthStarAmount ? `${arguments[1].monthStarNum || 0}人/${arguments[1].monthStarAmount || 0}元` : '---'
          }
        },
        {
          title: '审批及费用认定',
          dataIndex: 'approve'
        }
      ]
      // 节点若为分公司则添加操作按钮
      this.queryParam.branchComId && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) &&
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: '120px',
          align: 'center',
          customRender: (text, record) => {
            return record.type && (
              <a
                onClick={() => {
                  this.form.approve = record.approve
                  this.form.id = record.id
                  this.visible = true
                }}
              >
                编辑
              </a>
            )
          }
        })
      return columns
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求检查情况
      getStar(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            this.list = res.data || {}
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     * form：表单
     */
    submitForm(form) {
      this.$refs.dialogForm.loading = true
      form.qualityMonthId = this.$route.query.id
      form.isAdjust = this.$route.query.isAdjust
      updateStar(form)
        .then((res) => {
          if (res.code === '0') {
            this.init()
            this.$message.success('提交成功！')
            this.visible = false
          }
        })
        .finally(() => {
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>
